import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'

import { TabBar } from "antd-mobile";

import {
    AppOutline,
    UnorderedListOutline ,
    AppstoreOutline,
    UserOutline,
    GiftOutline 
 
  } from 'antd-mobile-icons'
import '../styles/MyTabber.css'



class MyTabbar extends Component {
    constructor(props) {
        super(props)
        this.state={
            tabs:[
                {text:"店铺",key:'/index/home',icon:<AppOutline />},
                {text:"分类" ,key:'/index/category',icon:<UnorderedListOutline />},
                {text:"全部商品",key:'/index/allgood',icon:<AppstoreOutline />},
                {text:"购物车",key:'/index/cart',icon:<GiftOutline />},
                {text:"个人中心",key:'/index/mine',icon:<UserOutline />},
            ],
            activeKey:'/index/home',
        }
    }
    handleChange(key){
        this.props.history.push({pathname:key,state:{id:282657}});
        this.setState({activeKey: key});
    }
    render() {
        return (
            <div className='footer'>
                 
                <TabBar activeKey={this.state.activeKey} onChange={(key) => { this.handleChange(key) }}>
          {this.state.tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.text} />
          ))}
        </TabBar>
                
            
            </div>
        );
    }
}

export default withRouter(MyTabbar);